<template>
  <div>
    <el-select v-model="value" placeholder="请选择" @change="changeSelect" style="width: 250px"  clearable multiple collapse-tags size="small"
               popper-class="productGroupSelector" class="productGroup-select">
        <div v-for="group in options" :key="group.label" class="productGroupSelector-group">
          <div style="display: flex;align-items: center; padding-top: 8px; padding-left: 5px">
            <el-checkbox v-model="group.checked" @change='selectAll($event,group.id)' :indeterminate="group.isIndeterminate"></el-checkbox>
            <div class="productGroupSelector-group-title">{{group.label}}</div>
          </div>
          <div style="display: flex; align-items: start;">
            <div class="productGroupSelector-option-root">
              <el-option class="productGroupSelector-option"
                         v-for="item in group.options"
                         :key="item.value"
                         :label="item.label"
                         :value="group.label + '-' + item.value">
                <div class="productGroupSelector-option-content">{{ item.label }}</div>
              </el-option>
            </div>
          </div>
        </div>
    </el-select>
  </div>
</template>
<script>
export default {
  name: 'SelectorComponent4',
  data () {
    return {
      options: [{
        id: 1,
        label: '热门城市',
        checked: false,
        isIndeterminate: false,
        options: [{
          value: 'Shanghai',
          label: '上海'
        }, {
          value: 'Beijing',
          label: '北京'
        }]
      }, {
        id: 2,
        label: '城市名',
        checked: false,
        isIndeterminate: false,
        options: [{
          value: 'Chengdu',
          label: '成都'
        }, {
          value: 'Shenzhen',
          label: '深圳'
        }, {
          value: 'Guangzhou',
          label: '广州'
        }, {
          value: 'Dalian',
          label: '大连'
        },
        {
          value: 'Huizhou',
          label: '惠州'
        }]
      },
      {
        id: 3,
        label: '城市名2',
        checked: false,
        isIndeterminate: false,
        options: [{
          value: 'Chengdu2',
          label: '成都22222'
        }, {
          value: 'Shenzhen2',
          label: '深圳22222'
        }, {
          value: 'Guangzhou2',
          label: '广州2222'
        }, {
          value: 'Dalian2',
          label: '大连222222222222'
        },
        {
          value: 'Huizhou2',
          label: '惠州2'
        }]
      },
      {
        id: 4,
        label: '城市名3',
        checked: false,
        isIndeterminate: false,
        options: [{
          value: 'Chengdu3',
          label: '成都333'
        }, {
          value: 'Shenzhen3',
          label: '深圳3'
        }, {
          value: 'Guangzhou3',
          label: '广州33'
        }, {
          value: 'Dalian3',
          label: '大连33333111111111111111333'
        },
        {
          value: 'Huizhou3',
          label: '惠州3'
        }]
      }],
      value: ''
    }
  },
  methods: {
    selectAll (val, id) {
      const selectOption = this.options.find(f => f.id === id)
      const arr = selectOption.options.map(m => selectOption.label + '-' + m.value)
      if (val) {
        arr.forEach(item => {
          if (!this.value.includes(item)) {
            this.value.push(item)
          }
        })
      } else {
        this.value.forEach((item, index) => {
          if (arr.includes(item)) {
            this.value.splice(index, 1, '')
          }
        })
      }
      this.value = this.value.filter(f => f !== '')
      if (selectOption.checked) {
        selectOption.isIndeterminate = false
      }
    },
    changeSelect (val) {
      this.options.forEach(item => {
        const arr = item.options.map(m => item.label + '-' + m.value)
        item.isIndeterminate = arr.some((v) => {
          return val.some(s => s === v)
        })
        item.checked = arr.every((v) => {
          return val.some(s => s === v)
        })
        if (item.checked) {
          item.isIndeterminate = false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
@selectGroupWidth: 450px;
.productGroupSelector-group {
  padding-top: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: @selectGroupWidth;
  padding-bottom: 10px;
  &-title {
    padding-left: 5px;
    font-weight:bold
  }
  &:after {
    display: none;
  }
}

.productGroupSelector-option-root {
  width: @selectGroupWidth;
}

.el-select-dropdown.is-multiple .el-select-dropdown__item{
  padding-right: 0;
}

.el-select-dropdown.is-multiple .el-select-dropdown__item.selected:after{
  left: 5px;
}

.productGroup-select /deep/ .el-select__tags-text:first-child{
  max-width: 120px;
}

.productGroupSelector-option {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  width: (@selectGroupWidth / 3);
  &-content {
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
}

.productGroup-select /deep/ .el-select__tags-text:first-child{
  max-width: 120px;
}

</style>

<style lang="less">
@selectWidth: 900px;
.productGroupSelector {
  .el-scrollbar__view.el-select-dropdown__list {
    width: @selectWidth;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 0;
    @media screen and (max-width: @selectWidth) {
      width: (@selectWidth/2);
    }
  }
}
.productGroupSelector {
  .el-select-dropdown__wrap.el-scrollbar__wrap {
    max-height: 350px
  }
}

</style>
